<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
            margin: 10px auto;
        }

        th,
        td {
            border: 1px solid black;
            padding: 15px;
            text-align: center;
        }
        form{
            width: 420px;
            height: 50px;
            margin: auto;
            position: relative;
        }
        #empTable tr:nth-child(2n){
            background-color: violet;
        }
        th{
            background-color: #999999;
        }
        form input{
            height: 40px;
            outline: none;
            width: 350px;
        }
        form button{
            height: 44px;
            width: 60px;
            position: absolute;
        }
        .page{
            text-align: center;
        }
        .page a{
            text-decoration: none;
            color: black;
            padding: 0 20px;
        }
        #add{
            height: 45px;
            width: 80px;
            background-color: pink;
            margin-left: 1075px;
            border: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        img{
            width: 40px;
            height: 40px;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<form enctype="multipart/form-data">
    <input type="text" placeholder="请输入员工姓名" autocomplete="off" class="inp">
    <button id="sear" type="button">搜索</button>
</form>
<a href="addemp.html"><button type="button" id="add">添加</button></a>
<table id="empTable">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>职务</th>
        <th>工资</th>
        <th>头像</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
  $("#empTable").ready(function(){
      $.ajax({
          type:"post",
          url:"/table",
          success:function(data){
              console.log(data)
              let tableBody2 = $("#empTable tbody");
              // 清空表格
              tableBody2.empty();
              $.each(data, function(index, emp){
                  let row = $("<tr></tr>");
                  row.append($("<td class='empno'></td>").text(emp.empno));
                  row.append($("<td class='ename'></td>").text(emp.ename));
                  row.append($("<td class='job'></td>").text(emp.job));
                  row.append($("<td class='sal'></td>").text(emp.sal));
                  row.append($("<td class='filepath'></td>").append($("<img>").attr("src", emp.fileUp.filepath)));
                  row.append($("<td><a href='#' class='delet'>删除</a><a href='#' class='update'>修改</a></td>"));
                  tableBody2.append(row);
              });
          }
      })
  })
</script>
</body>

</html>